<template>
  <div>
    姓名: {{ name }} 年龄: {{ age }}
    <button @click="addAge">年龄加1</button>
    <ul>
      <li v-for="(item, index) in games" :key="index">{{ item }}</li>
    </ul>
    <input type="text" v-model="newGame" />
    <button @click="addGame">添加游戏</button>
    年龄：{{ person.age2 }} 姓名：{{ person.name1 }}
    <button @click="changeRefs">refsChange</button>
  </div>
  <input v-model="firstName" />
  <input v-model="lastName" />

  计算属性: {{ fullName }}
  <button @click="changeFullName">修改</button>
</template>

<script lang="ts">
export default {
  name: "Person",
};
</script>
<script setup lang="ts">
import { ref, reactive, toRefs, computed } from "vue";

//计算属性
let firstName = ref("张");
let lastName = ref("三");
//这样定义的计算属性是只读的
let fullName = computed(() => {
  return firstName.value + lastName.value;
});
let fullName2 = computed({
  get() {
    return firstName.value + lastName.value;
  },
  set(val) {
    console.log(val);
  },
});
function changeFullName() {
  fullName2.value = "李四";
}

//ref定义响应式基本数据类型,或者对象(深层次无法响应)，
let name = ref("张三");
let age = ref(18);
let person = reactive({
  name1: "fsdafdf",
  age2: 25,
});
//toRefs可以将响应式对象转换为响应式基本数据类型，可以直接使用.value
let { name1, age2 } = toRefs(person);
function changeRefs() {
  name1.value += "李四";
  age2.value += 1;
}
//reactive用来定义响应式对象，重新分配一个对象，会失去响应式(可以使用object.assign)
let games = reactive(["王者荣耀", "绝地求生", "英雄联盟"]);
let newGame = ref("");
function addGame() {
  games.push(newGame.value);
}
function addAge() {
  age.value++;
}
</script>
<style></style>
